<template>
	<view class='page'>
		<cu-custom isBack>
		</cu-custom>
		<view class='head-bg'></view>
		<view class="title-box">
			注册账号
		</view>
		<view class="login-content">
			<view class="login-title">
				<view class="border">
					
				</view>
				<view class="text">
					{{type == 'code' ? '验证码' : '密码'}}注册
				</view>
			</view>
			
			<view class="form-box">
				<view class="form-item">
					<image src="https://qiyeji.oss-cn-beijing.aliyuncs.com/20250111/202501091351095869.png" mode=""></image>
					<input maxlength="11"  v-model='form.telphone' type="number" placeholder="请输入手机号"/>
				</view>
				<view class="form-item" style="margin-top: 80rpx;">
					<template v-if='type == "code"'>
						<image  src="https://qiyeji.oss-cn-beijing.aliyuncs.com/20250111/202501091352180683.png" mode=""></image>
						<input  v-model='form.code' maxlength="6" style="width: 70%;" type="number" placeholder="请输入验证码"/>
						<view class="code-text" @click='getCode' v-if="type == 'code'">
							{{btnText}}
						</view>
					</template>
					<template class="" v-if='type == "password"'>
						<image src="https://qiyeji.oss-cn-beijing.aliyuncs.com/20250111/202501091524266707.png" mode=""></image>
						<input v-model='form.password' maxlength="30" style="width: 50%;" type="password" placeholder="请输入密码"/>
						<view class="code-text1" @click='goPage("/packagesA/pages/my/setting/retrieve-password")'>
							忘记密码?
						</view>
					</template>
				</view>
			</view>
			
			<view class="btn-box">
				<view class="btn"  @click='handleLogin'>
					立即注册
				</view>
				<view v-if="type == 'code'" class="btn btn1" @click='handleChange({type: "password"})'>
					密码注册
				</view>
				<view v-if="type == 'password'" class="btn btn1" @click='handleChange({type: "code"})'>
					验证码注册
				</view>
			</view>
			
			
			<view class="hint-box">
				<text class="text1">已有账号</text>，<text class="text2" @click='goPage("/pages/login/login")'>立即登录</text>
			</view>
			
			
			<!-- #ifdef MP-WEIXIN -->
			<view class='third-box'>
				<view class='third-title'>社交账号注册</view>
				<view class='list'>
					<button class='item reset-btn' open-type='getPhoneNumber' @getphonenumber='wxLogin'
						v-for='item in thirdList' :key='item.key'>
						<image class='icon' mode='widthFix' :src='item.icon'></image>
					</button>
				</view>
			</view>
			<!-- #endif -->
			
			<view class="flex align-center justify-center">
				<view class="bottom-box" @click='handleAgreement'>
					<image  v-if="isAgreement" src="https://qiyeji.oss-cn-beijing.aliyuncs.com/20250111/202501091431322585.png" mode="aspectFill"></image>
					<image  v-else src="https://qiyeji.oss-cn-beijing.aliyuncs.com/20250111/202501091430387147.png" mode="aspectFill"></image>
					我已阅读并同意 <text  @click.stop='goPage("/packagesA/pages/my/setting/protocol")'>《用户协议》</text>与 <text @click.stop='goPage("/packagesA/pages/my/setting/protocol")'>《隐私政策》</text>
				</view>
			</view>
			
		</view>

		<accountChange ref='accountChange' :btn="'选择'" @back="back"></accountChange>
	</view>
</template>

<script>
	const app = getApp()
	import util from '@/common/util'
	import regRule from '@/common/rules'
	import {
		getPlatDetail,
	} from '@/api/common.js'
	import {
		getCode
	} from '@/api/common'
	import {
		reg
	} from '@/api/user/login'
	import env from '@/config/env.js'
	import accountChange from './account-change.vue'
	import {
		loginPass,
		accountUser,
		switchCompanyLogin,
		getPhoneNumber
	} from '@/api/login/login'
	export default {
		components: {
			accountChange
		},
		data() {
			return {
				platInfo: {},
				type: 'code',
				tabs: [{
						name: '验证码注册',
						type: 'code'
					},
					{
						name: '密码注册',
						type: 'password'
					}
				],
				btnText: '发送验证码',
				isAgreement: false,
				thirdList: [
					// {key: 'qq',icon: '/static/login/qq.png'},
					{
						key: 'wx',
						icon: '/static/login/phone.png'
					},
					// {key: 'wb',icon: '/static/login/wb.png'}
				],
				form: {
					name: undefined,
					telphone: undefined,
					code: undefined,
					password: undefined,
					openId: undefined,
				}
			}
		},
		onLoad(options) {
			// #ifdef MP-WEIXIN
			if (options.scene) {
				var scene = decodeURIComponent(options.scene)
				uni.setStorageSync('channelId', scene.split("=")[1])
			}
			this.form.openId = app.globalData.openid
			// #endif
			this.getPlatDetail()
		},
		methods: {
			getPlatDetail() {
				getPlatDetail({
					id: env[env.mchType].platid
				}).then(res => {
					this.platInfo = res;
				})
			},
			// 验证码登录
			codeLogin() {
				let mchList = ['benyuanhuali', 'lixuanba']
				if (mchList.includes(env.mchType)) {
					this.$refs.accountChange.open()
					return
				}
				uni.showLoading({
					mask: true
				})
				accountUser(this.form).then(res => {
					this.loginSuccess(res)
				})
			},
			back(companyId) {
				reg({
					...this.form,
					companyId: companyId
				}).then(res => {
					this.loginSuccess(res)
				})
			},
			handleChange(item) {
				this.type = item.type;
			},
			handleAgreement() {
				this.isAgreement = !this.isAgreement;
			},
			handleLogin() {
				if (!this.isAgreement) return uni.showToast({
					icon: 'none',
					title: '请阅读并勾选隐私政策'
				})
				// if (!this.form.name) return uni.showToast({
				// 	icon: 'none',
				// 	title: '请输入姓名'
				// })
				if (!regRule.phone.test(this.form.telphone)) return uni.showToast({
					icon: 'none',
					title: '请输入正确的手机号'
				})
				if (this.type == 'code' && !this.form.code) return uni.showToast({
					icon: 'none',
					title: '请输入验证码'
				})
				if (this.type == 'password' && !this.form.password) return uni.showToast({
					icon: 'none',
					title: '请输入密码'
				})
				if (this.type == 'password' && !regRule.password.test(this.form.password)) return uni.showToast({
					icon: 'none',
					title: '密码需要8个及以上字符，并包含数字和大小写字母'
				})
				let mchList = ['benyuanhuali', 'lixuanba']
				if (mchList.includes(env.mchType)) {
					this.$refs.accountChange.open()
					return
				}
				uni.showLoading({
					mask: true
				})
				this.form.channelId = uni.getStorageSync('channelId') || -1
				reg(this.form).then(res => {
					this.loginSuccess(res)
				})
			},
			// 微信登录
			async wxLogin(e) {
				await this.$onLaunchedOpenId;
				if (!this.isAgreement) return uni.showToast({
					icon: 'none',
					title: '请阅读并勾选隐私政策'
				})
				this.form.openId = app.globalData.openid
				if (e.detail.code) {
					getPhoneNumber({
						code: e.detail.code
					}).then(res => {
						let data = JSON.parse(res)
						this.form.telphone = data.phoneNumber;
						reg(this.form).then(res => {
							this.loginSuccess(res)
						})
					})
				}
			},

			// 登录成功后处理逻辑
			loginSuccess(res) {
				uni.removeStorageSync('pet_cargoId')
				if (res) {
					console.log(res)
					util.setLocalCache('token', res.access_token)
					util.setLocalCache('mchId', res.companyId)
					util.setLocalCache('loginData', res)
					util.removeLocalCache('isOut')
					this.$getUserHome()
					uni.$emit('changeCompany')
					// this.goPage("/pages/index/index/index?path=/pages/pet/myPet/index")
					this.goPage("/pages/index/index/index")
				}

				this.form = {
					telphone: undefined,
					code: undefined,
					password: undefined
				}
			},
			getCode() {
				if (!regRule.phone.test(this.form.telphone)) return uni.showToast({
					icon: 'none',
					title: '请输入正确的手机号'
				})
				if (this.btnText == '发送验证码') {
					this.btnText = '60S'
					getCode({
						telphone: this.form.telphone
					}).then(res => {
						this.countdown()
					}).catch(() => {
						this.btnText = '发送验证码'
					})
				}
			},
			countdown() {
				let time = 60;
				let timer = setInterval(() => {
					time--;
					if (time <= 0) {
						this.btnText = '发送验证码';
						clearInterval(timer)
						return;
					}
					this.btnText = time + 'S'
				}, 1000)
			},
			goPage(url) {
				uni.redirectTo({
					url
				})
			}
		}
	}
</script>

<style>
	.login-placeholder {
		color: var(--h3Color);
	}
</style>

<style scoped lang="scss">
	.third-box {
		width: 100%;
		margin-top: 70rpx;

		.third-title {
			font-size: 28rpx;
			letter-spacing: 4px;
			color: #999999;
			padding-bottom: 72rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			&:before,
			&::after {
				content: '';
				width: 142rpx;
				height: 4rpx;
				background: linear-gradient(270deg, rgba(216, 216, 216, 0) 0%, #D8D8D8 47%);
			}

			&::before {
				transform: rotate(180deg);
				margin: 0 20rpx;
			}

			&::after {
				margin: 0 10rpx;
			}

		}

		.list {
			padding: 0 100rpx 70rpx  100rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.item {
				width: 100rpx;
				height: 100rpx;
				border-radius: 16rpx;
				background: #FFD3D3;
				display: flex;
				align-items: center;
				justify-content: center;

				.icon {
					width: 64rpx;
					height: 64rpx;
				}
			}
		}
	}
</style>


<style scoped lang="scss">
	.head-bg {
		width: 100%;
		height: 350rpx;
		background: var(--primaryGradBg);
		position: absolute;
		left: 0;
		top: 0;
		z-index: -1;
	}
	.title-box{
		margin-top: 56rpx;
		padding: 0 40rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		font-size: 48rpx;
		color: var(--h1Color);
		line-height: 67rpx;
		text-align: left;
		font-style: normal;
	}
	
	
	.bottom-box {
		padding-bottom: 30rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: var(--h3Color);
		line-height: 33rpx;
		font-style: normal;
		// position: fixed;
		bottom: 80rpx;
		left: 50%;
		// transform: translateX(-50%);
		width: 100%;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
	
		image {
			margin-right: 12rpx;
			width: 28rpx;
			height: 28rpx;
		}
	
		text {
			color: var(--h2Color);
		}
	}
	
	.login-content{
		background: #FFFFFF;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		// height: 500rpx;
		position: relative;
		top: 65rpx;
		.hint-box{
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: var(--h1Color);
			line-height: 37rpx;
			text-align: center;
			font-style: normal;
			margin-top: 56rpx;
			.text1{
				color: var(--h3Color);
			}
			.text2{
				text-decoration: underline;
			}
		}
		.btn-box{
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			.btn{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 670rpx;
				height: 96rpx;
				background: var(--primaryBg);
				border-radius: 50rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 32rpx;
				color: var(--btnColor);
				line-height: 45rpx;
				text-align: center;
				font-style: normal;
			}
			.btn1{
				margin-top: 24rpx;
				border: 1rpx solid #EEEEEE;
				background: transparent;
				color: var(--h3Color);
			}
		}
		.form-box{
			padding:100rpx  40rpx;
		
			.form-item{
				padding-bottom: 25rpx;
				display: flex;
				align-items: center;
				border-bottom: 1rpx solid #EEEEEE;
				position: relative;
				.code-text{
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 26rpx;
					color: var(--statusBg4);
					line-height: 26rpx;
					text-align: right;
					font-style: normal;
					position: absolute;
					right: 10rpx;
					top: 34%;
					transform: translateY(-50%);
				}
				.code-text1{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: var(--h3Color);
					line-height: 26rpx;
					text-align: right;
					font-style: normal;
					position: absolute;
					right: 10rpx;
					top: 34%;
					transform: translateY(-50%);
				}
				image{
					width: 40rpx;
					height: 40rpx;
				}
				input{
					width: 100%;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 34rpx;
					line-height: 48rpx;
					text-align: left;
					font-style: normal;
				}
			}
		}
		.login-title{
			display: flex;
			align-items: center;
			padding: 71rpx 40rpx 0 40rpx;
			.border{
				width: 8rpx;
				height: 32rpx;
				background: var(--primaryBg);
				border-radius: 8rpx;
				margin-right: 12rpx;
			}
			.text{
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 32rpx;
				color: var(--h1Color);
				line-height: 45rpx;
				text-align: left;
				font-style: normal;
			}
			
		}
	}
	
</style>